<script>
import {ElMessage, uploadProps} from 'element-plus'
import axios from "axios";
import {Edit, Search, FolderOpened, Delete, CirclePlus} from "@element-plus/icons-vue";
export default{
  components:{
    Search,
    Delete,
    FolderOpened,
    Edit,
    CirclePlus
  },
  computed: {
    CirclePlus() {
      return CirclePlus
    },
    Delete() {
      return Delete
    },
    FolderOpened() {
      return FolderOpened
    },
    Edit() {
      return Edit
    },
    Search() {
      return Search
    }
  },
  data(){
    return{
      formLabelWidth:'140px',
      form:{},
      formUpdate:{},
      dialogDetailVisible:false,
      dialogAddFormVisible:false,
      dialogUpdateFormVisible:false,
      categoryInfo:{
        category_name:'',
      },
      categoryDetailData:[],
      categoryData:[]
    }
  },
  methods:{
    handleSuccessUpdate(respond){
      console.log(respond);
      this.formUpdate.category_image=respond
    },
    handleRemove(){uploadProps['onRemove'] = (uploadFile, uploadFiles) => {
      console.log(uploadFile, uploadFiles)
    }},
    handleSuccess(response) {
      // 上传图片成功后的回调
      console.log(response);
      this.form.category_image=response
    },
    btnShowDetail(row){
      axios.get("http://localhost:8080/category/goodsinfo",
          {params:{id:row.category_id} })
          .then(response => {
            this.categoryDetailData = response.data; // 将获取到的数据赋值给 orderDetailData
            console.log(this.categoryDetailData);
            this.dialogDetailVisible = true;
          })
          .catch(error => {
            console.log(error);
          });
    },
    btnDel(category_id){     //点击确定并进行删除操作
      console.log(category_id);
      this.$http.get("http://localhost:8080/category/del/"+category_id).then((res)=>{
        console.log(res.data);
        if(res.data===1){
          console.log("删除成功！");
          ElMessage({
            message: '删除成功！',
            type: 'success',
          })
          this.LoadInfoData()
        }
        else{
          ElMessage({
            message: '删除失败！',
            type: 'warning',
          })
          console.log("删除失败！");
        }
      }).catch(function(err){
        console.log(err);
      })
    },
    cancelEvent(){},     //点击取消
    btnShowUpdate(info){    //打开修改对话框并回显数据
       console.log(info);
       this.formUpdate = info;
       this.dialogUpdateFormVisible = true;
      },
    btnUpdateInfo(){    //点击对话框中的修改按钮进行修改操作
      console.log(this.formUpdate);
      this.$http.post("http://localhost:8080/category/update",this.formUpdate).then((res)=>{
        if(res.data===1){
          console.log("修改成功！");
          ElMessage({
            message: '修改成功！',
            type: 'success',
          })
          this.LoadInfoData();
          this.form = {}
          this.dialogUpdateFormVisible = false
        }else{
          ElMessage({
            message: '修改失败！',
            type: 'success',
          })
          console.log("修改失败！");
        }
      }).catch(function(err){
        console.log(err);
      })
    },
    onSubmit(){    //进行查询操作
      console.log(this.categoryInfo);
      this.LoadInfoData();
    },
    btnAdd(){     //点击添加按钮
    this.dialogAddFormVisible=true
    },
    btnAddcategory(){    //进行添加操作
      this.form.category_order = Number(this.form.category_order);
      console.log(this.form);
      this.$http.post("http://localhost:8080/category/insert",this.form).then((res)=>{
        if(res.data===1){
          console.log("添加成功！");
          ElMessage({
            message: '添加成功！',
            type: 'success',
          })
          this.LoadInfoData();
          this.form = {}
          this.dialogAddFormVisible = false
        }else{
          ElMessage({
            message: '添加失败！',
            type: 'danger',
          })
          console.log("添加失败！");
        }
      }).catch(function(err){
        console.log(err);
      })
    },
    LoadInfoData(){
      this.$http.get("http://localhost:8080/category/info",{params:{
        name:this.categoryInfo.category_name
        }}).then((res)=>{
        this.categoryData = res.data
        console.log(this.categoryData);
      }).catch(function(err){
        console.log(err);
      })
    }
  },
  mounted(){
    this.LoadInfoData()
  }
}
</script>
<template>
  <!--显示商品类别信息-->
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <span>
          <h2 class="card-title">商品分类管理</h2>
        </span>
      </div>
    </template>
      <el-form :inline="true" :model="categoryInfo" class="demo-form-inline">
        <el-form-item label="商品类别名称:">
          <el-select v-model="categoryInfo.category_name" placeholder="--请选择--" style="width:120px" clearable>
            <el-option v-for="item in categoryData" :key="item.category_name" :label="item.category_name" :value="item.category_name" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button default type="primary" :icon="Search" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button default type="success" :icon="CirclePlus" @click="btnAdd">新增</el-button>
        </el-form-item>
      </el-form>
      <!-- 显示商品类别信息表 -->
      <el-table :data="categoryData" stripe style="width: 100%">
        <el-table-column prop="category_id" label="编号" width="80px"/>
        <el-table-column prop="category_name" label="名称" width="100px"/>
        <el-table-column prop="category_image" label="图片详情" width="80px">
        <template #default="scope">
          <el-image
              style="width: 70px; height: 70px"
              :src="'http://localhost:8080/image/upload/'+scope.row.category_image"
              fit="cover"
          />
        </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="200px"/>
        <el-table-column prop="update_time" label="修改时间" width="200px"/>
        <el-table-column label="类别商品" width="200px">
          <template #default="scope">
          <el-button default type="success" size="small" :icon="FolderOpened"  @click="btnShowDetail(scope.row)">查看该类别商品</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200px">
          <template #default="scope">
            <el-popconfirm confirm-button-text="Yes"
                           cancel-button-text="No"
                           icon-color="#626AEF"
                           title="确定删除吗?"
                           @confirm="btnDel(scope.row.category_id)"
                           @cancel="cancelEvent">
              <template #reference>
                <el-button default type="danger" :icon="Delete"  size="small">删除</el-button>
              </template>
            </el-popconfirm>
            <el-button default type="warning" size="small" :icon="Edit" @click="btnShowUpdate(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

  <!-- 新增商品类别对话框 -->
  <el-dialog v-model="dialogAddFormVisible" width=500px center>
    <div class="center-title">
    <span>新增商品类别</span>
    </div>
    <br/>
    <el-form :model="form">
      <el-form-item label="商品类别名称:" :label-width="formLabelWidth">
        <el-input v-model="form.category_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品类别排序:" :label-width="formLabelWidth">
        <el-input v-model="form.category_order" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="类别图片:" :label-width="formLabelWidth">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/category/upload"
            :show-file-list="false"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
        >
          <img v-if="form.category_image" :src="'http://localhost:8080/image/upload/'+form.category_image" style="width:50%;height:50%"  alt=""/>
          <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="类别描述:" :label-width="formLabelWidth">
        <el-input
            v-model="form.category_description"
            style="width: 300px"
            :rows="2"
            type="textarea"
            maxlength="500"
            show-word-limit
            placeholder="--限500字内--"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddFormVisible = false">取消</el-button>
        <el-button type="primary" @click="btnAddcategory">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>

<!-- 编辑商品类别对话框 -->
<el-dialog v-model="dialogUpdateFormVisible" width=500px center>
<div class="center-title">
  <span>编辑商品类别</span>
</div>
<br/>
<el-form :model="formUpdate">
  <el-form-item label="商品类别名称" :label-width="formLabelWidth">
    <el-input v-model="formUpdate.category_name" autocomplete="off" />
  </el-form-item>
  <el-form-item label="商品类别排序" :label-width="formLabelWidth">
    <el-input v-model="formUpdate.category_order" autocomplete="off" />
  </el-form-item>
  <el-form-item label="类别图片:" :label-width="formLabelWidth">
  <el-upload
      class="avatar-uploader"
      action="http://localhost:8080/category/upload"
      :show-file-list="false"
      :on-success="handleSuccessUpdate"
  >
    <img v-if="formUpdate.category_image" :src="'http://localhost:8080/image/upload/'+formUpdate.category_image" style="width:50%;height:50%"  alt=""/>
    <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
  </el-upload>
  </el-form-item>
  <el-form-item label="类别描述:" :label-width="formLabelWidth">
  <el-input
      v-model="formUpdate.category_description"
      style="width: 300px"
      :rows="2"
      type="textarea"
      maxlength="500"
      show-word-limit
      placeholder="--限500字内--"
  />
  </el-form-item>
</el-form>
<template #footer>
  <div class="dialog-footer">
    <el-button default @click="dialogUpdateFormVisible = false">取消</el-button>
    <el-button default  type="primary" @click="btnUpdateInfo">
      修改
    </el-button>
  </div>
</template>
</el-dialog>

  <!-- 该商品类别商品详情对话框 -->
  <el-dialog v-model="dialogDetailVisible" title="该类别商品" width="800" center>
    <el-table :data="categoryDetailData">
      <el-table-column prop="category_id" label="商品类别编号"></el-table-column>
      <el-table-column prop="category_name" label="商品类别名称"></el-table-column>
      <el-table-column prop="goods_id" label="商品ID"></el-table-column>
      <el-table-column prop="goods_name" label=商品名称></el-table-column>
      <el-table-column prop="goods_price" label="商品价格"></el-table-column>
      <el-table-column prop="goods_description" label="商品描述"></el-table-column>
      <el-table-column prop="goods_image" label="图片描述">
        <template #default="scope">
          <el-image
              style="width: 70px; height: 70px"
              :src="'http://localhost:8080/image/upload/'+scope.row.goods_image"
              fit="cover"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

</template>

<style>
.card-title {
  text-align: center; /* 将标题文本居中对齐 */
}
.center-title{
  text-align: center;
}
</style>